حساب حجم استعلام حاوية CSS: حساب أبعاد الحاوية

تُحدث استعلامات الحاوية ثورة في تصميم الويب سريع الاستجابة، مما يسمح للعناصر بالتكيف بناءً على حجم الحاوية الخاصة بها، وليس منفذ العرض. يعد فهم كيفية حساب أبعاد الحاوية أمرًا بالغ الأهمية للاستفادة من قوة هذه الميزة بشكل فعال. سيستكشف هذا الدليل الشامل تعقيدات حساب حجم الحاوية، ويقدم أمثلة عملية قابلة للتطبيق في سياق عالمي.

ما هي استعلامات الحاوية؟ ملخص سريع

تعتمد استعلامات الوسائط التقليدية على حجم منفذ العرض لتحديد الأنماط التي سيتم تطبيقها. من ناحية أخرى، تتيح لك استعلامات الحاوية تطبيق الأنماط بناءً على أبعاد عنصر سلف معين، وهو الحاوية. يتيح ذلك سلوكًا سريع الاستجابة أكثر دقة ووعيًا بالسياق، وهو مفيد بشكل خاص للمكونات القابلة لإعادة الاستخدام داخل التخطيطات الأكبر.

ضع في اعتبارك سيناريو لديك فيه مكون بطاقة. باستخدام استعلامات الوسائط، سيتغير مظهر البطاقة بناءً على عرض منفذ العرض. باستخدام استعلامات الحاوية، سيتغير مظهر البطاقة بناءً على عرض الحاوية التي توجد بداخلها، بغض النظر عن حجم منفذ العرض الإجمالي. هذا يجعل المكون أكثر مرونة وقابلية لإعادة الاستخدام عبر التخطيطات المختلفة.

تحديد سياق الاحتواء

قبل الخوض في حساب الحجم، من الضروري فهم كيفية إنشاء سياق احتواء. يتم ذلك باستخدام الخصائص container-type و container-name.

container-type

تحدد الخاصية container-type نوع الاحتواء. يمكن أن تأخذ القيم التالية:

• size: يؤسس احتواء الحجم. يصبح الحجم المضمّن للحاوية (العرض في وضع الكتابة الأفقي، والارتفاع في وضع الكتابة الرأسي) هو الأساس لاستعلامات الحاوية. هذا هو النوع الأكثر شيوعًا وصلة بحسابات الحجم.
• inline-size: مكافئ لـ size، ويحدد بشكل صريح احتواء الحجم المضمّن.
• layout: يؤسس احتواء التخطيط. تنشئ الحاوية سياق تنسيق جديدًا، مما يمنع أحفادها من التأثير على التخطيط المحيط. هذا لا يؤثر بشكل مباشر على حساب الحجم ولكنه يمكن أن يؤثر على المساحة المتاحة للحاوية.
• style: يؤسس احتواء النمط. لن تؤثر التغييرات التي تطرأ على خصائص الحاوية على الأنماط خارجها. مثل layout، هذا لا يؤثر بشكل مباشر على حساب الحجم.
• paint: يؤسس احتواء الطلاء. تنشئ الحاوية سياق تكديس وتمنع أحفادها من الطلاء خارج حدودها. مرة أخرى، لا يرتبط بشكل مباشر بحساب الحجم نفسه.
• content: يؤسس احتواء التخطيط والنمط والطلاء.
• normal: العنصر ليس حاوية.

بالنسبة لتركيزنا على حساب الحجم، سنعمل بشكل أساسي مع container-type: size; و container-type: inline-size;.

container-name

تعيّن الخاصية container-name اسمًا للحاوية. يتيح لك ذلك استهداف حاويات معينة عند كتابة استعلامات الحاوية، وهو أمر مفيد بشكل خاص عندما يكون لديك حاويات متعددة في صفحة ما.

مثال:

.card-container {
  container-type: size;
  container-name: card;
}

@container card (min-width: 300px) {
  .card-content {
    font-size: 1.2em;
  }
}

في هذا المثال، يتم تعريف العنصر .card-container كحاوية حجم تسمى "card". ثم يستهدف استعلام الحاوية هذه الحاوية المحددة ويطبق أنماطًا على .card-content عندما يكون عرض الحاوية 300 بكسل على الأقل.

حساب أبعاد الحاوية: المبادئ الأساسية

المبدأ الأساسي وراء حساب حجم استعلام الحاوية هو أن الأبعاد المستخدمة لتقييم استعلامات الحاوية هي أبعاد مربع المحتوى للحاوية. هذا يعني:

• العرض المستخدم هو عرض منطقة المحتوى داخل الحاوية، باستثناء المساحة المتروكة والحدود والهامش.
• الارتفاع المستخدم هو ارتفاع منطقة المحتوى داخل الحاوية، باستثناء المساحة المتروكة والحدود والهامش.

دعنا نحلل كيفية عمل هذا مع خصائص CSS المختلفة التي يمكن أن تؤثر على حجم الحاوية:

1. العرض والارتفاع الصريحان

إذا كانت الحاوية تحتوي على width أو height محددين بشكل صريح، فإن هذه القيم (بعد حساب box-sizing) تؤثر بشكل مباشر على أبعاد مربع المحتوى.

مثال:

.container {
  width: 500px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
  container-type: size;
}

في هذه الحالة، نظرًا لتعيين box-sizing: border-box;، فإن العرض الإجمالي للحاوية (بما في ذلك المساحة المتروكة والحدود) هو 500 بكسل. يتم حساب عرض مربع المحتوى، الذي يتم استخدامه لاستعلام الحاوية، على النحو التالي:

عرض مربع المحتوى = العرض - المساحة المتروكة اليسرى - المساحة المتروكة اليمنى - الحد الأيسر - الحد الأيمن

عرض مربع المحتوى = 500 بكسل - 20 بكسل - 20 بكسل - 5 بكسل - 5 بكسل = 450 بكسل

لذلك، سيتم تقييم استعلام الحاوية بناءً على عرض 450 بكسل.

إذا تم تعيين box-sizing: content-box; بدلاً من ذلك (وهو الإعداد الافتراضي)، فسيكون عرض مربع المحتوى 500 بكسل، وسيكون العرض الإجمالي للحاوية 550 بكسل.

2. العرض والارتفاع التلقائيان

عندما يتم تعيين عرض الحاوية أو ارتفاعها على auto، يحسب المتصفح الأبعاد بناءً على المحتوى والمساحة المتاحة. يمكن أن يكون هذا الحساب أكثر تعقيدًا، اعتمادًا على نوع عرض الحاوية (على سبيل المثال، block، inline-block، flex، grid) وتخطيط الأصل الخاص بها.

عناصر مستوى الكتلة: بالنسبة لعناصر مستوى الكتلة التي لها width: auto;، يتوسع العرض عادةً لملء المساحة الأفقية المتاحة داخل الحاوية الأصلية (ناقص الهامش). يتم تحديد الارتفاع من خلال المحتوى الموجود داخل العنصر.

عناصر مضمنة على مستوى الكتلة: بالنسبة للعناصر المضمنة على مستوى الكتلة التي لها width: auto; و height: auto;، يتم تحديد الأبعاد من خلال المحتوى. يتقلص العنصر ليناسب محتواه.

حاويات Flexbox و Grid: تحتوي حاويات Flexbox و Grid على خوارزميات تخطيط أكثر تعقيدًا. تؤثر أبعاد عناصرها الفرعية، جنبًا إلى جنب مع خصائص مثل flex-grow و flex-shrink و grid-template-columns و grid-template-rows، على حجم الحاوية.

مثال (عرض تلقائي مع Flexbox):

.container {
  display: flex;
  flex-direction: row;
  width: auto;
  container-type: size;
}

.item {
  flex: 1;
  min-width: 100px;
}

في هذا المثال، تحتوي .container على width: auto;. سيتم تحديد عرضه من خلال المساحة المتاحة وخصائص flex لعناصره الفرعية. إذا كانت الحاوية الأصلية بعرض 600 بكسل، وكان هناك عنصرا .item، لكل منهما flex: 1; و min-width: 100px;، فمن المحتمل أن يكون عرض الحاوية 600 بكسل (ناقص أي مساحة متروكة/حدود على الحاوية نفسها).

3. Min-Width و Max-Width

تُقيّد الخاصيتان min-width و max-width عرض الحاوية. سيكون العرض الفعلي هو نتيجة حساب العرض العادي، المحصور بين قيمتي min-width و max-width.

مثال:

.container {
  width: auto;
  min-width: 300px;
  max-width: 800px;
  container-type: size;
}

في هذه الحالة، سيتوسع عرض الحاوية لملء المساحة المتاحة، ولكنه لن يكون أبدًا أصغر من 300 بكسل أو أكبر من 800 بكسل. سيتم تقييم استعلام الحاوية بناءً على هذا العرض المحصور.

4. عروض النسبة المئوية

عندما يكون للحاوية عرض نسبة مئوية، يتم حساب العرض كنسبة مئوية من عرض كتلة الاحتواء الخاصة بها. هذه تقنية شائعة لإنشاء تخطيطات سريعة الاستجابة.

مثال:

.container {
  width: 80%;
  container-type: size;
}

إذا كانت كتلة الاحتواء بعرض 1000 بكسل، فسيكون عرض الحاوية 800 بكسل. ثم سيتم تقييم استعلام الحاوية بناءً على هذا العرض المحسوب.

5. الخاصية contain

على الرغم من أنها لا تؤثر بشكل مباشر على حساب *الحجم* نفسه، إلا أن الخاصية contain تؤثر بشكل كبير على تخطيط وعرض الحاوية وأحفادها. يمكن أن يؤدي استخدام contain: layout; أو contain: paint; أو contain: content; إلى عزل الحاوية وأطفالها، مما قد يحسن الأداء والقدرة على التنبؤ. يمكن أن يؤثر هذا العزل بشكل غير مباشر على المساحة المتاحة للحاوية، وبالتالي يؤثر على حجمها النهائي إذا تم تعيين العرض أو الارتفاع على `auto`.

من المهم ملاحظة أن `container-type` يعيّن ضمنيًا `contain: size;` إذا لم يتم تعيين قيمة `contain` أكثر تحديدًا بالفعل. يضمن ذلك أن يكون حجم الحاوية مستقلاً عن الأصل والأشقاء، مما يجعل استعلامات الحاوية موثوقة.

أمثلة عملية عبر تخطيطات مختلفة

دعنا نستكشف بعض الأمثلة العملية لكيفية عمل حساب حجم استعلام الحاوية في سيناريوهات تخطيط مختلفة.

المثال 1: مكون البطاقة في تخطيط الشبكة

تخيل مكون بطاقة معروضًا داخل تخطيط شبكة. نريد أن يتكيف مظهر البطاقة بناءً على عرضها داخل الشبكة.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.card {
  container-type: size;
  padding: 15px;
  border: 1px solid #ccc;
}

.card h2 {
  font-size: 1.2em;
}

@container (max-width: 350px) {
  .card h2 {
    font-size: 1em;
  }
}

في هذا المثال، تنشئ .grid-container تخطيط شبكة سريع الاستجابة. العنصر .card هو حاوية حجم. يتحقق استعلام الحاوية مما إذا كان عرض البطاقة أقل من أو يساوي 350 بكسل. إذا كان الأمر كذلك، يتم تقليل حجم خط العنصر h2 داخل البطاقة. يتيح ذلك للبطاقة تكييف محتواها بناءً على المساحة المتاحة لها داخل الشبكة.

المثال 2: التنقل في الشريط الجانبي

ضع في اعتبارك مكون تنقل في الشريط الجانبي يحتاج إلى تكييف تخطيطه بناءً على عرضه المتاح.

.sidebar {
  width: 250px;
  container-type: size;
  background-color: #f0f0f0;
  padding: 10px;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  margin-bottom: 5px;
}

.sidebar a {
  display: block;
  padding: 8px;
  text-decoration: none;
  color: #333;
}

@container (max-width: 200px) {
  .sidebar a {
    text-align: center;
    padding: 5px;
  }
}

في هذا المثال، .sidebar عبارة عن حاوية حجم بعرض ثابت يبلغ 250 بكسل. يتحقق استعلام الحاوية مما إذا كان عرض الشريط الجانبي أقل من أو يساوي 200 بكسل. إذا كان الأمر كذلك، يتم تغيير محاذاة النص للروابط داخل الشريط الجانبي إلى المنتصف، ويتم تقليل المساحة المتروكة. يمكن أن يكون هذا مفيدًا لتكييف الشريط الجانبي مع الشاشات الأصغر أو التخطيطات الأضيق.

المثال 3: تكييف أحجام الصور

يمكن أيضًا استخدام استعلامات الحاوية لتكييف أحجام الصور داخل الحاوية.

.image-container {
  width: 400px;
  container-type: size;
}

.image-container img {
  width: 100%;
  height: auto;
}

@container (max-width: 300px) {
  .image-container img {
    max-height: 200px;
    object-fit: cover;
  }
}

هنا، .image-container هي حاوية الحجم. يتحقق استعلام الحاوية مما إذا كان عرض الحاوية أقل من أو يساوي 300 بكسل. إذا كان الأمر كذلك، يتم تعيين max-height للصورة على 200 بكسل، ويتم تطبيق object-fit: cover; لضمان ملء الصورة للمساحة المتاحة دون تشويه نسبة العرض إلى الارتفاع. يتيح لك ذلك التحكم في كيفية عرض الصور داخل حاويات ذات أحجام مختلفة.

معالجة الحالات الحافة والمزالق المحتملة

في حين أن استعلامات الحاوية قوية، فمن المهم أن تكون على دراية بالمشكلات المحتملة والحالات الحافة.

1. التبعيات الدائرية

تجنب إنشاء تبعيات دائرية حيث يؤثر استعلام الحاوية على حجم الحاوية الخاصة به، لأن هذا قد يؤدي إلى حلقات لا نهائية أو سلوك غير متوقع. سيحاول المتصفح كسر هذه الحلقات، لكن النتائج قد لا تكون قابلة للتنبؤ بها.

2. اعتبارات الأداء

قد يؤثر الاستخدام المفرط لاستعلامات الحاوية، خاصةً مع العمليات الحسابية المعقدة، على الأداء. قم بتحسين CSS الخاص بك وتجنب استعلامات الحاوية غير الضرورية. استخدم أدوات مطوري المتصفح لمراقبة الأداء وتحديد الاختناقات المحتملة.

3. حاويات التعشيش

عند تعشيش الحاويات، انتبه إلى الحاوية التي يستهدفها الاستعلام. استخدم container-name لتحديد الحاوية الهدف بشكل صريح لتجنب الآثار الجانبية غير المقصودة. تذكر أيضًا أن استعلامات الحاوية تنطبق فقط على العناصر الفرعية المباشرة للحاوية، وليس على الأحفاد في أسفل شجرة DOM.

4. توافق المتصفح

تأكد من التحقق من توافق المتصفح قبل الاعتماد بشكل كبير على استعلامات الحاوية. على الرغم من أن الدعم يتزايد بسرعة، إلا أن المتصفحات القديمة قد لا تدعمها. ضع في اعتبارك استخدام polyfills أو توفير أنماط احتياطية للمتصفحات القديمة.

5. المحتوى الديناميكي

إذا تغير المحتوى داخل الحاوية ديناميكيًا (على سبيل المثال، من خلال JavaScript)، فقد يتغير حجم الحاوية أيضًا، مما يؤدي إلى تشغيل استعلامات الحاوية. تأكد من أن كود JavaScript الخاص بك يتعامل بشكل صحيح مع هذه التغييرات ويحدث التخطيط وفقًا لذلك. ضع في اعتبارك استخدام MutationObserver للكشف عن التغييرات في محتوى الحاوية وتشغيل إعادة تقييم لاستعلامات الحاوية.

اعتبارات عالمية لاستعلامات الحاوية

عند استخدام استعلامات الحاوية في سياق عالمي، ضع في اعتبارك ما يلي:

• اتجاه النص (RTL/LTR): تعمل استعلامات الحاوية بشكل أساسي مع الحجم المضمّن للحاوية. تأكد من أن أنماطك متوافقة مع اتجاهات النص من اليسار إلى اليمين (LTR) ومن اليمين إلى اليسار (RTL).
• التدويل (i18n): قد يكون للغات المختلفة أطوال نص مختلفة، مما قد يؤثر على حجم المحتوى داخل الحاوية. اختبر استعلامات الحاوية الخاصة بك بلغات مختلفة للتأكد من أنها تتكيف بشكل صحيح.
• تحميل الخط: يمكن أن يؤثر تحميل الخط على الحجم الأولي لمحتوى الحاوية. ضع في اعتبارك استخدام font-display: swap; لتجنب تغييرات التخطيط أثناء تحميل الخطوط.
• إمكانية الوصول: تأكد من أن عمليات التكيف المستندة إلى استعلامات الحاوية تحافظ على إمكانية الوصول. على سبيل المثال، لا تقلل أحجام الخطوط إلى النقطة التي يصعب فيها قراءتها للمستخدمين الذين يعانون من ضعف البصر. اختبر دائمًا باستخدام أدوات إمكانية الوصول والتقنيات المساعدة.

تصحيح استعلامات الحاوية

قد يكون تصحيح استعلامات الحاوية أمرًا صعبًا في بعض الأحيان. فيما يلي بعض النصائح المفيدة:

• استخدم أدوات مطوري المتصفح: توفر معظم المتصفحات الحديثة أدوات تطوير ممتازة لفحص CSS. استخدم هذه الأدوات لفحص الأنماط المحسوبة لعناصرك والتحقق من تطبيق استعلامات الحاوية بشكل صحيح.
• فحص أبعاد الحاوية: استخدم أدوات المطور لفحص أبعاد مربع المحتوى للحاوية الخاصة بك. سيساعدك هذا على فهم سبب تشغيل استعلام حاوية معين أم لا.
• إضافة إشارات مرئية: أضف مؤقتًا إشارات مرئية (على سبيل المثال، حدود، ألوان خلفية) إلى الحاوية وأطفالها للمساعدة في تصور التخطيط وتحديد أي مشكلات.
• استخدام تسجيل وحدة التحكم: استخدم عبارات console.log() في كود JavaScript الخاص بك لتسجيل أبعاد الحاوية وقيم خصائص CSS ذات الصلة. يمكن أن يساعدك هذا في تتبع السلوك غير المتوقع.
• تبسيط الكود: إذا كنت تواجه مشكلة في تصحيح إعداد استعلام حاوية معقد، فحاول تبسيط الكود عن طريق إزالة العناصر والأنماط غير الضرورية. يمكن أن يساعدك هذا في عزل المشكلة.

مستقبل استعلامات الحاوية

لا تزال استعلامات الحاوية ميزة جديدة نسبيًا، ومن المرجح أن تتوسع قدراتها في المستقبل. توقع رؤية تحسينات في دعم المتصفح، وشروط استعلام أكثر تعقيدًا، وتكامل أوثق مع ميزات CSS الأخرى.

الخلاصة

يعد فهم حساب حجم استعلام الحاوية أمرًا ضروريًا لإنشاء تصميمات ويب سريعة الاستجابة وقابلة للتكيف حقًا. من خلال إتقان مبادئ أبعاد الحاوية والنظر في المخاطر المحتملة، يمكنك الاستفادة من قوة استعلامات الحاوية لإنشاء مواقع ويب أكثر مرونة وقابلة للصيانة وسهلة الاستخدام تلبي احتياجات جمهور عالمي. احتضن قوة تصميم الأنماط المدرك للسياق وافتح مستوى جديدًا من التصميم سريع الاستجابة باستخدام استعلامات الحاوية.